<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        ul {
            list-style: none;
        }

        body {
            background-color: #333;
        }

        .nav {
            width: 800px;
            height: 42px;
            margin: 100px auto;
            background: url(images/rss.png) right center no-repeat #fff;
            border-radius: 10px;
            position: relative;
        }

        .nav ul li {
            width: 83px;
            height: 42px;
            float: left;
            line-height: 42px;
            text-align: center;
            cursor: pointer;
        }

        .nav span {
            width: 83px;
            height: 42px;
            background: url(images/cloud.gif) no-repeat;
            position: absolute;
            left: 0;
            top: 0;
        }

        .nav ul {
            position: absolute;
        }
    </style>
    <script src="../../jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="nav">
    <span></span>
    <ul>
        <li>北京校区</li>
        <li>北京校区</li>
        <li>北京校区</li>
        <li>北京校区</li>
        <li>北京校区</li>
        <li>北京校区</li>
        <li>北京校区</li>
        <li>北京校区</li>
    </ul>
</div>
</body>
</html>

<script>

   var oLi=document.getElementsByTagName('li');
   var span=document.getElementsByTagName('span')[0]
   var  flag=0;
   for(var i=0;i<oLi.length;i++){

       oLi[i].index=i;
       oLi[i].onmouseover=function () {
           console.log(this);

           animate(span,{"left":83*this.index})
       }

       //鼠标离开

       oLi[i].onmouseout=function () {

           animate(span,{"left":flag})

       }

       //点击事件

       oLi[i].onclick=function () {

           flag=83*this.index;
           animate(span,{"left":83*this.index})
       }
   }
    
    
    
//    //  {left:"500px"}  key == left
//    function animate(obj, json, fn) {
//
//        clearInterval(obj.timer)
//
//        obj.timer = setInterval(function () {
//
//            var flag = true;  // 因为定时器在执行，每次 都会重新 声明一个变量
//
//            for (var key  in json) {
//
//                //动画公式？
////         新的位置=当前的位置+步长（目标-当前的位置）/10
//
//                var step = (json[key] - parseInt(getStyle(obj, key))) / 10;
//
//                step = step > 0 ? Math.ceil(step) : Math.floor(step);
//
//                obj.style[key] = parseInt(getStyle(obj, key)) + step + "px";
//
//                //当动画完成之后，清掉定时器
//
//
//                if(parseInt(getStyle(obj, key)) != json[key]){
//                    flag=false;
//                }
//
//            }
//
//
//             if(flag==true){
//
//                     clearInterval(obj.timer)
//
//                     if (fn) {
//                         fn();//执行回调函数
//                     }
//
//
//             }
//
//        },20)
//
//
//    }
//
//    function getStyle(obj, attr) {
//        if (window.getComputedStyle) {
//            //getComputedStyle(DOM，伪元素)
//            return window.getComputedStyle(obj, null)[attr];
//        } else {
//            return obj.currentStyle[attr];
//        }
//    }


</script>